<template>
  <view class="settle-container">
    <view class="settle-left">
      <radio value="r1" :checked="isALlChecked" color="#C00000" @click="changeStatus" style="transform: scale(.7);" />全选
    </view>
    <view class="settle-right">
      <view class="settle-amount">合计：<text style="color: #C00000;font-weight: 700;">￥{{priceAll}}</text></view>
      <view class="settle-payFor" @click="settleGoods">结算({{countAll}})</view>
    </view>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapMutations
  } from 'vuex'
  import {
    vShow
  } from "vue";
  const utils = require('@/common/tools')
  export default {
    name: "user-settle",
    data() {
      return {
        // goodsTotal: 0
        timer: null,
      };
    },
    computed: {
      ...mapGetters(['priceAll', 'countAll', 'goodsInfo', 'address', 'token']),
      // 通过选中的商品数量和总商品数量(不包括单商品的数量)
      isALlChecked() {
        let checkedTotal = this.goodsInfo.filter(item => item.goods_status).length
        return this.goodsInfo.length === checkedTotal
      }
    },
    created() {
      // console.log('created');
      // this.goodsTotal = this.$root.getTotal()
      this.updateGoodsCountTotal()
      this.updateGoodsPriceTotal()
    },
    methods: {
      ...mapMutations('goodsCar', ['updateGoodsPriceTotal', 'updateGoodsCountTotal', 'updateAllGoodsStatus']),
      ...mapMutations('userInfo',['updateRedirect']),
      changeStatus(e) {
        // 点击全选，改变所有商品的状态
        // console.log(e);
        this.updateAllGoodsStatus(!this.isALlChecked)
      },
      // 点击结算按钮，进行商品的结算
      async settleGoods() {
        // 是否有选中的商品 根据商品的选中数量来判断
        if (!this.countAll) return uni.showToast({
          title: "您还没有选中商品",
          icon: 'none'
        })
        // 是否选择了收货地址
        if (!this.address.name) return uni.showToast({
          title: "您还没有选择收货地址",
          icon: 'none'
        })
        // 是否登录
        if (!this.token) {
          // 设定延迟时间
          let t = 3
          this.showToast(t)
          this.timer = setInterval(async () => {
            this.showToast(--t)
            // 如果t小于等于0，则将要退出定时器，然后进行跳转
            if (t <= 0) {
              clearInterval(this.timer)
              const [err,res] = await utils._switchTab('/pages/user/user')
              // console.log(data);
              // 跳转成功，记录下当前页面的信息，switchTab和url地址
              if(!err && (res ?. errMsg === "switchTab:ok")){
                this.updateRedirect({
                  openType: 'switchTab',
                  from: '/pages/car/car'
                })
              }
              return
            }
          }, 1000)
        }
      },
      // 点击结算，3秒知乎跳转到登录页面
      showToast(time) {
        uni.showToast({
          title: `您还没有登录，${time}后跳转到登录页面`,
          icon: 'none'
        })
      }
    }
  }
</script>

<style lang="scss">
  .settle-container {
    position: fixed;
    bottom: 0;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    height: 40px;
    align-items: center;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #fff;
    z-index: 999;

    .settle-right {
      display: flex;
      align-items: center;
      height: 100%;

      .settle-amount {}

      .settle-payFor {
        margin-left: 10px;
        min-width: 100px;
        height: 100%;
        background-color: #C00000;
        color: #fff;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
      }
    }
  }
</style>
